<template>
  <div class="partner">
    <Search @sendInfo="receiveInfo" :searchTitle="'合作商搜索:'" />
    <div class="list">
      <el-row>
        <el-col :span="4"
          ><el-button icon="iconfont icon-jiahao" type="warning" @click="newCreate"
            >新建</el-button
          ></el-col
        >
      </el-row>
      <el-table
        ref="singleTable"
        :data="regionInfo.currentPageRecords"
        highlight-current-row
        center
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="120" type="index" height="45">
        </el-table-column>
        <el-table-column align="center" property="name" label="区域名称"> </el-table-column>
        <el-table-column align="center" property="account" label="账号"> </el-table-column>
        <el-table-column align="center" property="vmCount" label="设备数量"> </el-table-column>
        <el-table-column align="center" label="成分比例"
          ><template slot-scope="{ row }">
            {{ row.ratio + '%' }}
          </template>
        </el-table-column>
        <el-table-column align="center" property="contact" label="联系人"> </el-table-column>
        <el-table-column align="center" property="mobile" label="联系电话"> </el-table-column>
        <el-table-column align="center" label="操作" width="500">
          <template slot-scope="{ row }">
            <el-button
              type="success"
              icon="el-icon-setting"
              size="mini"
              plain
              @click.native="resetPassword(row.id)"
              >重置密码</el-button
            >
            <el-button type="info" icon="el-icon-search" size="mini" @click.native="seeDetails(row)"
              >查看详情</el-button
            >
            <el-button size="mini" type="primary" icon="el-icon-edit" @click.native="aditInfo(row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click.native="deleteInfo(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :searchTaskList="regionInfo"
        @currentSizeChange="(value) => (partnerInfoParams.pageSize = value)"
        @currentPageChange="(value) => (partnerInfoParams.pageIndex = value)"
      />
    </div>
    <!-- // 新建// 修改 -->
    <Dialog :dialogVisibleInfo="dialogVisiblePartner" @dialogClose="dialogClosePartner">
      <template #body>
        <el-form
          ref="ruleFormEdit"
          :model="partnerInfo"
          :rules="rulesEdit"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="合作商名称:" prop="name">
            <el-input
              v-model="partnerInfo.name"
              placeholder="请输入"
              show-word-limit
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人:" prop="contact">
            <el-input
              v-model="partnerInfo.contact"
              placeholder="请输入"
              show-word-limit
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="mobile">
            <el-input
              v-model="partnerInfo.mobile"
              type="tel"
              placeholder="请输入"
              show-word-limit
              maxlength="11"
            ></el-input>
          </el-form-item>
          <el-form-item label="成分比例(%):" prop="ratio" label-width="110px">
            <template>
              <el-input-number
                size="larger"
                v-model="partnerInfo.ratio"
                :max="100"
                :min="0"
                controls-position="right"
                class="inputNum"
              ></el-input-number>
            </template>
          </el-form-item>
          <el-form-item label="账号:" prop="account">
            <el-input
              v-model="partnerInfo.account"
              placeholder="请输入"
              show-word-limit
              maxlength="18"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              v-model="partnerInfo.password"
              placeholder="请输入"
              show-word-limit
              maxlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item class="confirm">
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="dialogVisiblePartner.dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
    <!-- 合作商详情 -->
    <Dialog :dialogVisibleInfo="dialogVisibleDetails">
      <template #body>
        <div class="partnercontent">
          <div class="text">
            <p>合作商名称:</p>
            <span>{{ partnerDetailInfo.name }}</span>
          </div>
          <div class="text">
            <p>联系人:</p>
            <span>{{ partnerDetailInfo.contact }}</span>
          </div>
          <div class="text">
            <p>联系电话:</p>
            <span>{{ partnerDetailInfo.mobile }}</span>
          </div>
          <div class="text">
            <p>分成比例:</p>
            <span>{{ partnerDetailInfo.ratio + '%' }}</span>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script>
import { partnerSearchAPI, addPartnerAPI, resetPasswordAPI, resetPartnerAPI } from '@/api'
export default {
  name: 'Partner',
  data() {
    return {
      // 搜索框
      searchInfo: '',
      // 获取合作商数据的参数
      partnerInfoParams: {
        pageIndex: 1,
        pageSize: 10
      },
      // 渲染区域列表的数据,
      regionInfo: {
        currentPageRecords: []
      },
      // 新建
      dialogVisiblePartner: {
        dialogTitle: '新增合作商',
        dialogVisible: false,
        dialogWidth: '30%'
      },
      // 查看详情
      dialogVisibleDetails: {
        dialogTitle: '合作商详情',
        dialogVisible: false,
        dialogWidth: '30%'
      },
      // 渲染详情的信息
      partnerDetailInfo: {
        name: '',
        contact: '',
        ratio: '',
        mobile: ''
      },
      // 新增的信息
      partnerInfo: {
        name: '',
        account: '', // 账号
        password: '',
        ratio: null, // number
        contact: '', // 联系人
        mobile: ''
      },
      // 校验规则
      rulesEdit: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        account: [{ required: true, message: '不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '不能为空', trigger: 'blur' }],
        ratio: [{ required: true, message: '不能为空', trigger: 'blur' }],
        contact: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mobile: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入11位合法手机号', trigger: 'blur' }
        ]
      },
      // 商户的id
      partnerId: ''
    }
  },
  created() {
    this.fecthPartnerList(this.partnerInfoParams)
  },

  methods: {
    // 搜索框事件
    receiveInfo(value) {
      if (this.searchInfo !== value) {
        this.searchInfo = value
        this.partnerInfoParams.pageIndex = 1
        this.fecthPartnerList({ ...this.partnerInfoParams, name: this.searchInfo })
      }
    },
    // 获取数据
    async fecthPartnerList(data) {
      const res = await partnerSearchAPI(data)
      // console.log(res.data)
      this.regionInfo = res.data
    },
    // 新增合作商的弹窗
    newCreate() {
      this.dialogVisiblePartner.dialogTitle = '新增合作商'
      this.dialogVisiblePartner.dialogVisible = true
    },
    // 新增与修改的确认与提交
    submitForm() {
      this.$refs.ruleFormEdit.validate(async (valid) => {
        if (!valid) return
        if (!this.partnerId) {
          try {
            await addPartnerAPI(this.partnerInfo)
            this.$message({
              type: 'success',
              message: '新增成功',
              offset: 75
            })
            this.fecthPartnerList(this.partnerInfoParams)
            this.dialogVisiblePartner.dialogVisible = false
          } catch (error) {
            this.$message({
              type: 'error',
              message: error.response.data,
              offset: 75
            })
          }
        } else {
          try {
            await resetPartnerAPI(this.partnerId, this.partnerInfo)
            this.$message({
              type: 'success',
              message: '修改成功',
              offset: 75
            })
            this.fecthPartnerList(this.partnerInfoParams)
            this.dialogVisiblePartner.dialogVisible = false
          } catch (error) {
            this.$message({
              type: 'error',
              message: error.response.data,
              offset: 75
            })
          }
        }
      })
    },

    // 重置密码
    resetPassword(id) {
      this.$confirm('确定要重置合作商密码吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await resetPasswordAPI(id)
            this.$message({
              type: 'success',
              message: '重置成功!',
              offset: 75
            })
            this.fecthPartnerList(this.partnerInfoParams)
          } catch (error) {
            this.$message({
              type: 'error',
              message: error.response.data,
              offset: 75
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            offset: 75
          })
        })
    },
    // 查看详情
    seeDetails(row) {
      this.partnerDetailInfo.name = row.name
      this.partnerDetailInfo.contact = row.contact
      this.partnerDetailInfo.ratio = row.ratio
      this.partnerDetailInfo.mobile = row.mobile
      this.dialogVisibleDetails.dialogVisible = true
    },

    // 修改
    aditInfo(row) {
      // console.log(row)
      this.partnerId = row.id // 判断修改与新增的条件
      this.dialogVisiblePartner.dialogTitle = '修改合作商'
      this.dialogVisiblePartner.dialogVisible = true
      this.partnerInfo.name = row.name
      this.partnerInfo.contact = row.contact
      this.partnerInfo.ratio = row.ratio
      this.partnerInfo.mobile = row.mobile
      this.partnerInfo.password = row.password
      this.partnerInfo.account = row.account
    },
    // 弹框的关闭事件
    dialogClosePartner() {
      this.$refs.ruleFormEdit.resetFields()
      this.partnerId = '' // 清空id
      // 新增的信息
      this.partnerInfo = {
        name: '',
        account: '', // 账号
        password: '',
        ratio: null, // number
        contact: '', // 联系人
        mobile: ''
      }
    },
    // 删除提示
    deleteInfo() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning',
        offset: 80,
        duration: 2000
      })
    }
  },
  watch: {
    partnerInfoParams: {
      handler() {
        this.fecthRegionList({ ...this.partnerInfoParams, name: this.searchInfo })
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .el-col {
    margin-bottom: 20px;
  }
  /deep/.el-table th.el-table__cell {
    background-color: rgb(243, 246, 251);
  }
  /deep/tr.el-table__row {
    height: 45px !important;
  }

  /deep/.el-table td.el-table__cell {
    border: none;
    height: 0px;
    padding: 0;
    .el-button {
      height: 30px;
      line-height: 1px;
      margin: 10px 0 10px 10px;
      width: 80px;
    }
    .el-button--info,
    .el-button--success {
      width: 100px;
    }
  }
  /deep/.el-table th.el-table__cell.is-leaf {
    border: none;
  }
  /deep/.el-button--warning {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    text-align: center;
    .icon-jiahao:before {
      content: '\e726';
      margin-right: 5px;
    }
  }
  /deep/.el-button--info {
    background-color: #fbf4f0 !important;
    border: none;
    color: #333;
  }
  /deep/.el-table::before {
    height: 0;
  }
}
.confirm{
    width: 100%;
    padding-left: 20%;
    /deep/.el-button--primary{
     background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
     border: none;
    }
  }

</style>
